<template>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="user" style="width: 100%; height: 400px"></div>
</template>

<script setup lang="ts">

//按需引入
import { onMounted, watch } from "vue"
import * as statisticAPI from '@/api/admin/statistic'
import { dayjs } from "element-plus"
import echarts from '@/util/echart'

const props = defineProps({
    searchDate: {
        type: Object
    }
})

onMounted(() => {
    render()
})

watch([props.searchDate], (newValue, oldValue) => {
    render()

})

const render = async () => {
    const data = await getuserStatistics()

    var chartDom = document.getElementById("user")!
    var myChart = echarts.init(chartDom)
    var option = {
        tooltip: {
            trigger: 'axis', // 触发提示方式
        },
        legend: {
            show: true,
            top: 'bottom',
            data: ['用户总量（个）', '新增用户（个）']
        },
        grid: {
            top: 20 //整个图表距离上边的距离
        },
        xAxis: {
            type: 'category',
            boundaryGap: false, //坐标轴两边留白,把x轴数据卡在坎下
            data: data?.dateList,
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '用户总量（个）',
                data: data?.totalUserList,
                type: 'line',
                showSymbol: false, //未显示鼠标上移的圆点
                symbolSize: 10, //圆点大小
                lineStyle: {
                    color: 'rgba(255, 208, 0)' //线条颜色
                },
                itemStyle: {
                    color: 'rgba(255, 208, 0)' //提示时点的颜色
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.5)', //提示框背景色
                    textStyle: {
                        color: '#fff' //提示框字体颜色
                    }
                }
            },
            {
                name: '新增用户（个）',
                data: data?.newUserList,
                type: 'line',
                showSymbol: false, //未显示鼠标上移的圆点
                symbolSize: 10,
                lineStyle: {
                    color: 'rgba(255, 139, 139)' //线条颜色
                },
                itemStyle: {
                    color: 'rgba(255, 139, 139)' //提示时点的颜色
                },

            }
        ]
    };
    myChart.setOption(option);
}
const getuserStatistics = async () => {
    const begin = props.searchDate.begin
    const end = props.searchDate.end

    const res = await statisticAPI.userStatistics({ begin, end })
    if (res.code == 1) {
        return {
            dateList: res.data.dateList.split(','),
            newUserList: res.data.newUserList.split(','),
            totalUserList: res.data.totalUserList.split(',')
        }
    }

}

</script>
<style scoped></style>